{% extends "volunteer_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "用户管理" %}</title>
{% load staticfiles %}
<link rel="stylesheet" href="{{STATIC_URL }}open/css/chromagallery.min.css">

<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}bootstrap-3.3.4-dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/components_pro/layout6/css/index.css" rel="stylesheet" />

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/dialog.css" rel="stylesheet" />

<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker-2.0.css"
    rel="stylesheet" />
<link href="https://magicbox.bk.tencent.com/static_api/v3/assets/umeditor-1.2.2/themes/default/css/umeditor.css"
    rel="stylesheet" />
{{ block.super }}
{% endblock %}

{% block bar%}
<!-- 侧边导航栏start -->
<div class="bar">
    <div class="sidebar">
        <ul>
            <li>
                <a href="{{ SITE_URL }}summaryActivity/"><span class="iconfont icon-icon_yingyongguanli"></span>活动汇总</a>
            </li>
            <li>
                <a href="{{ SITE_URL }}userManagement"><span
                        class="iconfont icon-guanliyuan_jiaoseguanli"></span>用户管理</a>
            </li>
            <li>
                <a href="{{ SITE_URL }}"><span class="iconfont icon-jinru"></span>退出登录</a>
            </li>
        </ul>
    </div>
    <a class="btn">
        <span class="iconfont icon-zhedie"></span>
    </a>

</div>
<!-- 侧边导航栏结束 -->
{% endblock %}

{% block content %}

<div class="content">
    <!-- 瀑布流 -->
    <div class="row part4">
        <div class="chroma-gallery mygallery">
            <img src="{{ STATIC_URL }}open/img/lbt-img1.jpg" alt="Pic 1"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img1.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img2.jpg" alt="Pic 2"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img2.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img3.jpg" alt="Pic 3"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img3.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img4.jpg" alt="Pic 4"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img4.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img5.jpg" alt="Pic 5"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img5.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img6.jpg" alt="Pic 6"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img6.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img7.jpg" alt="Pic 7"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img7.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img8.jpg" alt="Pic 8"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img8.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img9.jpg" alt="Pic 9"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img9.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img10.jpg" alt="Pic 10"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img10.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img11.jpg" alt="Pic 11"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img11.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img12.jpg" alt="Pic 12"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img12.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img13.jpg" alt="Pic 13"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img13.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img14.jpg" alt="Pic 14"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img14.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img15.jpg" alt="Pic 15"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img15.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img16.jpg" alt="Pic 16"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img16.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img17.jpg" alt="Pic 17"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img17.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img18.jpg" alt="Pic 18"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img18.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img19.jpg" alt="Pic 19"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img19.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img20.jpg" alt="Pic 20"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img20.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img21.jpg" alt="Pic 21"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img21.jpg">
            <img src="{{ STATIC_URL }}open/img/lbt-img22.jpg" alt="Pic 22"
                data-largesrc="{{ STATIC_URL }}open/img/lbt-img22.jpg">
        </div>
    </div>

    <!-- 学生账户管理 -->
    <div class="page-content " style="width:75%; background: #faefff; color: #888;">
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab" style="background: #faefff;">
                <a role="button" data-toggle="collapse" href="#panel-content3" class="panel-icon panel-spread"
                    aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content3" class="panel-title" style="color: #888;"
                    aria-expanded="true">学生账号管理</h3>
            </div>
            <div id="panel-content3" class="panel-body panel-collapse p0 collapse in" aria-expanded="true">
                <table class="bk-table bk-table-header-bordered" id="studentAccount"
                    style="background: #faefff;border: #888 1px solid;">
                    <thead style="height: 41px;">
                        <tr>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>用户类型</th>
                            <th>注册时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>

    <!-- 公益企业账户管理 -->
    <div class="page-content " style="width:75%; background: #faefff; color: #888;">
        <div class="bk-collapse-panel">
            <div class="panel-header" role="tab" style="background: #faefff;">
                <a role="button" data-toggle="collapse" href="#panel-content4" class="panel-icon panel-spread"
                    aria-expanded="true"></a>
                <h3 role="button" data-toggle="collapse" href="#panel-content4" class="panel-title" style="color: #888;"
                    aria-expanded="true">公益企业账号管理</h3>
            </div>
            <div id="panel-content4" class="panel-body panel-collapse p0 collapse in" aria-expanded="true">
                <table class="bk-table bk-table-header-bordered" id="companyAccount"
                    style="background: #faefff;border: #888 1px solid;">
                    <thead style="height: 41px;">
                        <tr>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>用户类型</th>
                            <th>注册时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>

                </table>
            </div>
        </div>
    </div>



</div>
{% endblock %}

{% block extra_block %}
<!-- 瀑布流 -->
<script src="{{ STATIC_URL }}js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="{{ STATIC_URL }}js/jquery-1.11.0.min.js"><\/script>')</script>
<script src="{{ STATIC_URL }}js/chromagallery.pkgd.min.js"></script>
<!-- 报名表 -->
<!-- <script src="{{ STATIC_URL }}js/jquery-1.10.2.min.js"></script> -->
<script src="{{ STATIC_URL }}bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bkDialog-2.0/js/bkDialog.js"></script>
<script src="{{ SITE_URL }}static/datatables-1.10.7/jquery.dataTables.js"></script>
<script src="{{ SITE_URL }}static/datatables-1.10.7/dataTables.bootstrap.js"></script>

<script type="text/javascript">
    // 瀑布流
    $(document).ready(function () {
        $(".mygallery").chromaGallery
            ({
                color: '#000',
                gridMargin: 15,
                maxColumns: 5,
                dof: true,
                screenOpacity: 0.8
            });
    });

    //表格(DataTables)
    var language = {
        search: "搜索：",
        lengthMenu: "每页显示 _MENU_ 记录",
        zeroRecords: "没找到相应的数据！",
        info: "分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条",
        infoEmpty: "暂无数据！",
        infoFiltered: "(从 _MAX_ 条数据中搜索)",
        paginate: {
            first: "首页",
            last: "尾页",
            previous: "上一页",
            next: "下一页",
        }
    }


    var studentTable = $('#studentAccount').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: false, //隐藏分页
        ordering: false, //关闭排序
        info: false, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        // lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{ SITE_URL }}get_student_info_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data
                return json.data;
            },
        },
        columnDefs: [
            {
                targets: 0,
                data: "username",
            },
            {
                targets: 1,
                data: "password",
            },
            {
                targets: 2,
                data: "role",
            },
            {
                targets: 3,
                data: "create_time",
            },
            {
                targets: 4,
                data: "id",
                render: function (data, type, row, meta) {
                    return '<a class="bk-icon-button bk-warning bk-button-mini" type="button" style="color:#000;" onclick="resetStuPsw(' + data + ')" title="重置">\n' +
                        '<span class="bk-icon iconfont icon-zhongzhimima"></span>\n' +
                        '<i class="bk-text">重置密码</i>\n' +
                        '</a>\n' +
                        '<a class="bk-icon-button bk-danger bk-button-mini" type="button" onclick="deleteStudent(' + data + ')" title="注销">\n' +
                        '<span class="bk-icon iconfont icon-zhuxiao"></span>\n' +
                        '<i class="bk-text">注销该用户</i>\n' +
                        '</a>';
                }
            }

        ]
    });

    function resetStuPsw(id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '',
            content: '确认重置该用户密码？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}reset_student_password/' + id,
                    method: 'get',
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            studentTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }


    function deleteStudent(id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '',
            content: '确认注销该用户？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}delete_student_info/' + id,
                    method: 'get',
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            studentTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }



    var companyTable = $('#companyAccount').DataTable({
        sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">',//这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
        pagingType: "full_numbers",
        paging: false, //隐藏分页
        ordering: false, //关闭排序
        info: false, //隐藏左下角分页信息
        searching: false, //关闭搜索
        pageLength: 10, //每页显示几条数据
        lengthChange: false, //不允许用户改变表格每页显示的记录数
        language: language, //汉化
        serverSide: true,
        // lengthMenu: [5, 10, 25, 50, 75, 100],
        ajax: {
            url: '{{ SITE_URL }}get_company_info_list/',
            method: "get",
            dataType: 'json',
            dataSrc: function (json) {
                json.recordsTotal = json.data.info.recordsTotal;
                json.recordsFiltered = json.data.info.recordsFiltered;
                json.data = json.data.info.data
                return json.data;
            },
        },
        columnDefs: [
            {
                targets: 0,
                data: "username",
            },
            {
                targets: 1,
                data: "password",
            },
            {
                targets: 2,
                data: "role",
            },
            {
                targets: 3,
                data: "create_time",
            },
            {
                targets: 4,
                data: "id",
                render: function (data, type, row, meta) {
                    return '<a class="bk-icon-button bk-warning bk-button-mini" type="button" style="color:#000;" onclick="resetComPsw(' + data + ')" title="重置">\n' +
                        '<span class="bk-icon iconfont icon-zhongzhimima"></span>\n' +
                        '<i class="bk-text">重置密码</i>\n' +
                        '</a>\n' +
                        '<a class="bk-icon-button bk-danger bk-button-mini" type="button" onclick="deleteCompany(' + data + ')" title="注销">\n' +
                        '<span class="bk-icon iconfont icon-zhuxiao"></span>\n' +
                        '<i class="bk-text">注销该用户</i>\n' +
                        '</a>';
                }
            }

        ]
    });

    function resetComPsw(id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '',
            content: '确认重置该用户密码？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}reset_company_password/' + id,
                    method: 'get',
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            CompanyTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }


    function deleteCompany(id) {
        var dialog = new bkDialog({
            type: 'dialog',
            title: '删除',
            content: '确认注销该账号？',
            confirmFn: function () {
                $.ajax({
                    url: '{{ SITE_URL }}delete_company_info/' + id,
                    method: 'get',
                    success: function (response) {
                        if (response['result']) {
                            new bkMessage({
                                message: response['message'],
                                theme: 'success'
                            })
                            companyTable.ajax.reload(null, false)
                        } else {
                            // 失败处理
                            new bkMessage({
                                message: response['message'],
                                theme: 'error',
                                delay: 3000
                            });
                        }
                    }
                })
            }
        });
        dialog.show();
    }

    setInterval(function () {
        studentTable.ajax.reload(null, false);
    }, 3000);
    setInterval(function () {
        companyTable.ajax.reload(null, false);
    }, 3000);
</script>

{% endblock %}